import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {Button, Card, Form, message} from 'antd';
import {PageHeaderWrapper} from '@ant-design/pro-layout';

import EmpTable from './components/EmpTable';
import EmpModal from './components/EmpModal';
import RoleModal from './components/RoleModal';
import styles from './index.less';

@connect(state => ({
  employee: state.employee,
}))
@Form.create()
export default class Index extends PureComponent {
  state = {
    editData: {},
    modalVisible: false,
    modalType: 'add',
    roleModalVisible:false,
  };

  componentDidMount() {
    const {dispatch, employee} = this.props;
    employee.pagination = {
      page: 1,
      pageSize: 10
    };
    dispatch({
      type: 'employee/fetch',
    });
    dispatch({
      type: 'employee/queryRole',
    });
  }


  handleSelectRows = (rows) => {
    this.setState({
      selectedRows: rows,
    });
  };

//点击修改按钮
  handleEmpClick = (record) => {
    this.setState({
      modalVisible: true,
      editData: record,
      modalType: 'edit'
    });
  };

  //弹框显示 modal状态修改
  handleModalVisible = (flag) => {
    this.setState({
      modalVisible: !!flag,
      modalType: "add",
      editData: {}
    });
  };

//添加，修改
  handleAdd = (values, form) => {
    const _this = this;
    const {dispatch} = _this.props;
    dispatch({
      type: 'employee/' + this.state.modalType,
      payload: values,
      callback: (result) => {
        if (result.resultCode === "1") {
          message.success('操作成功');
          _this.setState({
            modalVisible: false,
            editData: {},
            modalType: "add",
          });
          form.resetFields();
        } else {
          message.error(result.resultDesc);
        }
      },
    });
  }

  handleRoleModalCancel = () => {
    this.setState({
      roleModalVisible: false
    });
  }

  handleOpenRoleModel = (item) => {
    this.setState({
      roleModalVisible: true,
      editData: item
    });
  }

  handleRoleSave = (values, form) => {
    const _this = this;
    const {dispatch} = this.props;
    dispatch({
      type: 'employee/saveEmployeeRole',
      payload: values,
      callback: (result) => {
        if (result.resultCode === "1") {
          _this.setState({
            roleModalVisible: false,
            editData: {}
          });
          form.resetFields();
          message.success(result.resultDesc);
        } else {
          message.error('操作失败！');
        }
      },
    });
  }

  render() {
    const {employee: {loading, data, roleData:{rows: roleList}}} = this.props;
    const {selectedRows, editData, modalType, modalVisible, roleModalVisible} = this.state;
    return (
      <PageHeaderWrapper title="人员列表">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListOperator}>
              <Button style={{width:'100%'}} icon="plus" type="dashed" onClick={() => this.handleModalVisible(true)}>
                新建
              </Button>
            </div>
            <EmpTable
              selectedRows={selectedRows}
              loading={loading}
              data={data}
              onSelectRow={this.handleSelectRows}
              onEditEmpClick={this.handleEmpClick}
              onOpenRoleModel={this.handleOpenRoleModel}
            />
          </div>
        </Card>
        <EmpModal
          key={Date.now()+"EmpModal"}
          modalType={modalType}
          modalVisible={modalVisible}
          handleAdd={this.handleAdd}
          handleModalVisible={this.handleModalVisible}
          items={editData}
        />
        <RoleModal
          key={Date.now()}
          modalVisible={roleModalVisible}
          handleSave={this.handleRoleSave}
          handleModalCancel={this.handleRoleModalCancel}
          items={editData}
          roleList={roleList}
        />
      </PageHeaderWrapper>
    );
  }
}
